<template>
  <!-- 招商经理订单 -->
  <div class="tgy-order">
    <gysHeader type="tgy" :Data="headerData"></gysHeader>
    <div class="gy-nav">
      <div class="aGroup">
        <!-- <scroll class="wrapper"
                ref="wrapper"
                :startX="0"
                :click="true"
                :scrollX="true"
                :scrollY="false"
                :eventPassthrough="'vertical'"> -->
          <div class="content">
            <van-button class="span" data-id="1"  @click="selectItem(1)" :color="[type == 1 ? '#F30C23':'#999999']" plain hairline round type="primary">
              <i>全部</i>
              <em>{{arr['1']}}</em>
            </van-button>
            <van-button class="span" data-id="2"  @click="selectItem(2)" :color="[type == 2 ? '#F30C23':'#999999']" plain hairline round type="primary">
              <i>未付款</i>
              <em>{{arr['2']}}</em>
            </van-button>
            <van-button class="span" data-id="3"  @click="selectItem(3)" :color="[type == 3 ? '#F30C23':'#999999']" plain hairline round type="primary">
              <i>已付款</i>
              <em>{{arr['3']}}</em>
            </van-button>
            <van-button class="span" data-id="4"  @click="selectItem(4)" :color="[type == 4 ? '#F30C23':'#999999']" plain hairline round type="primary">
              <i>已确认收货</i>
              <em>{{arr['4']}}</em>
            </van-button>
          </div>
        <!-- </scroll> -->
      </div>
    </div>
    <div class="user-list" v-show="list.length">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" class="item">
          <div class="fxordertit clearfix">
            <span class="fl">订单日期：{{item.end_time}}&nbsp;</span>
            <span class="fl">付款日期：{{item.pay_time}}</span>
            <span class="fr" :class="[item.status == 3 ? 'ready' : '']">{{item.status_name}}</span>
          </div>
          <div class="fxorderlst clearfix">
            <div class="dxPic fl">
              <img :src="item.avthor" class="user" width="100%" />
            </div>
            <div class="fxorderinfo fl">
              <div v-if="item.receiver_name">
                <p>姓名：</p>
                <p>{{item.receiver_name}}</p>
              </div>
              <div>
                <p>{{headerData.commission_name}}：</p>
                <p v-if="item.commission">&yen;{{item.commission}}</p>
                <p v-else>--</p>
              </div>
              <div>
                <p>会员ID：</p>
                <p v-if="item.user_id">{{item.user_id}}</p>
                <p v-else>--</p>
              </div>
              <div>
                <p>级别：</p>
                <p>{{item.level_name}}</p>
              </div>
              <div>
                <p>金额：</p>
                <p v-if="item.money">{{item.money}}</p>
                <p v-else>--</p>
              </div>
              <div v-if="item.order_status">
                <p>状态：</p>
                <p>{{item.order_status}}</p>
              </div>
              <div v-if="item.nickname">
                <p>昵称：</p>
                <p>{{item.nickname}}</p>
              </div>
             <!--  <div
                style="padding-left: 3%;clear:both;"
                v-if="item.mobile && is_fx_order_mobile == 1"
              >
                <p>电话：</p>
                <p>{{item.mobile}}</p>
              </div> -->
              <p class="check_detail"
                 @click="tgyOrderDetail(item.order_id)">
                <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary">查看订单商品明细</van-button>
                <!-- <svg-icon icon-class="icon_right"
                          class="all-class-icon"></svg-icon> -->
              </p>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import { getTgyOrder } from '@/api/user/gys/gysApi'
// import noDataImg from '@img/no_order.png'
import gysHeader from '@/views/user/gys/components/gysHeader/index'
import noData from '@/components/noData/index'
import Scroll from '@/components/scroll/index'
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {
    noData,
    Scroll,
    gysHeader
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无数据',
        marginTop: '30px'
      },
      headerData: {
        commission_name: '',
        total_commissions: '',
        total_fee: '',
        gys_num: '',
        ftitle_gys_user: ''
        /*  settle_commission: '',
        all_order_amount: '',
        dls_num: '',
        order_total: '',
        type: 1 */
      },
      arr: {
        1: '0',
        2: '0',
        3: '0',
        4: '0'
      },
      type: 1,
      list: [],
      loading: false,
      finished: false,
      error: false,
      // p: 2
      listParams: {
        p: 1,
        type: 1
      }
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getTgyOrder(this.listParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.headerData.commission_name = resData.commission_name
          this.headerData.total_commissions = resData.total_commissions
          this.headerData.total_fee = resData.total_fee
          this.headerData.gys_num = resData.recommend_nums
          this.headerData.ftitle_gys_user = '供应商' + '数量'
          this.arr = resData.arr
          this.list = resData.order_list
          if (this.list <= 0) {
            this.finished = true
          }
          this.listParams.p++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad() {
      getTgyOrder(this.listParams).then(res => {
        this.loading = false
        if (res.data.order_list && res.data.order_list.length) {
          this.list.push(...res.data.order_list)
          this.listParams.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    // 切换
    selectItem(type) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      this.listParams = {
        p: 1,
        type: type
      }
      this.type = type
      getTgyOrder(this.listParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.list = res.data.order_list
          if (this.list <= 0) {
            this.finished = true
          }
          this.listParams.p++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 查看订单详细
    tgyOrderDetail(id) {
      this.Jump('tgyOrderDetail', { orderId: id })
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad()
    })
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/user/Group/index";
@import "src/styles/user/orderList/index";
.gy-nav{
  border-top: 1px solid #ededed;
  padding: 10px 30px;
  background: #fff;
}
</style>
